<template lang="pug">
  .particles(:id='id')
    slot
</template>

<script>
export default {
  name: 'particles',
  data () {
    return {
      id: 'Particles'
    }
  },
  methods: {
    particlesInit () {
      console.log(this.id)
      window.particlesJS(this.id, {
        interactivity: {
          events: {
            onhover: {
              mode: 'grab'
            },
            onclick: {
              enable: false
            }
            // modes: {
            //   bubble: {
            //     distance: 9,
            //     size: 5
            //   }
            // }
          }
        },
        particles: {
          number: {
            value: 50,
            density: {
              enable: true,
              value_area: 700
            }
          },
          size: {
            value: 3,
            random: true,
            anim: {
              enable: false,
              speed: 40,
              size_min: 0.1,
              sync: false
            }
          },
          move: {
            out_mode: 'bounce',
            bounce: true,
            attract: {
              enable: false
            }
          },
          opacity: {
            value: 0.8,
            random: true,
            anim: {
              enable: true,
              speed: 0.8,
              opacity_min: 0.1,
              sync: false
            }
          },
          color: {
            value: ['#fff', '#eee']
          }
        }
      })
    }
  },
  mounted () {
    if (process.browser) {
      this.id = 'particle' + Math.floor(Math.random() * 1000)
      this.$nextTick(() => {
        this.particlesInit()
      })
    }
  }
}
</script>

<style lang="stylus">
.particles 
  position relative
.particles-js-canvas-el
  position absolute
  left 0
  top 0
  z-index 1
</style>
